<template>
  <div>
    <el-tabs v-model="temp"
             :tab-position="tabPosition"
             @tab-click="handleClick"
             @tab-remove="removeTab"
             style="height: 200px;">
      <el-tab-pane v-for="(item, index) in tabs"
                   :key="index"
                   :label="item.label"
                   :name="item.name">
        <slot :name="item.name">

        </slot>
      </el-tab-pane>
      <Temp :data="datas">
        <template slot-scope="scope">
          <template v-if="scope.item=='基础信息'">
            <YueziDetais :postpartum_id="postpartum_id"></YueziDetais>
          </template>
          <template v-if="scope.item=='电视及网络情况'">
            <TvNetwork></TvNetwork>
          </template>
          <template v-if="scope.item=='账号管理'">
            <YueziInfoMar></YueziInfoMar>
          </template>
          <template v-if="scope.item=='详情'">
            <CourseDetails :course_id="course_id"></CourseDetails>
          </template>
          <template v-if="scope.item=='编辑'">
            <CourseEdit :course_id="course_id"
                        :row="row"></CourseEdit>
          </template>
        </template>

      </Temp>
    </el-tabs>
  </div>

</template>

<script>
import Temp from '@/components/temp'
//月子中心
import YueziDetais from "@/views/yueziCenter/components/YueziDetails.vue"
import TvNetwork from "@/views/yueziCenter/components/TvNetwork.vue"
import YueziInfoMar from "@/views/yueziCenter/components/YueziInfoMar.vue"

//陪训课程
import CourseDetails from '@/views/trainingCourse/components/courseDetails'
import CourseEdit from '@/views/trainingCourse/components/courseEdit'
export default {
  name: 'practice',
  components: { Temp, YueziDetais, TvNetwork, YueziInfoMar, CourseDetails, CourseEdit },
  props: {
    tabs: {
      type: Array,
      default: []
    },
    postpartum_id: "",//接收到了
    course_id: "",
    row: "",
    activeName: {
      type: String,
    },
    activelabel: {
      type: String,
    }
  },
  watch: {
    //这是引用的时候想通过父组件事件修改当前tabs选中项
    activeName (oldValue, newValue) {
      // handler (n, o) {
      console.log('111122222222222222222222')
      //   this.temp = n
      // }
    }
  },
  data () {
    return {
      tabPosition: 'left',
      //用临时变量代替。防止出现子组件修改父组件数据报错，很讨厌报错
      temp: this.activeName,
      datas: [],



    }
  },
  methods: {
    handleClick (tab, event) {
      this.$set(this.datas, 0, tab.label)
    },
    removeTab (targetName) {
      if (targetName === this.datas[0]) {
        this.datas.shift()
      }
      this.tabList.forEach((item, index) => {
        if (targetName === item) {
          this.tabList.splice(index, 1)
          this.activeName = this.tabList[0]
          this.$set(this.datas, 0, this.tabList[0])
        }
      })
    },

  },

  mounted () {
    // 初始化数据
    set(this.datas, 0, this.activelabel)
  }
}


</script>

<style lang="less">
.el-tabs {
  height: 100vh !important ;
  .el-tabs__nav {
    margin-top: 20px;
  }
}
</style>